<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	String skin = request.getParameter("skin");
	skin = skin == null ? "" : skin;
	String logout=request.getParameter("logout");
	if(logout!=null){
		session.invalidate();
		response.sendRedirect("login.jsp");
	}
			
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="ui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu_ul" class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">权限管理</a>
          <dl class="layui-nav-child">
          	<dd><a href="javascript:void(0)" data-type="tabAdd">用户管理99</a></dd>
            <dd><a href="" onclick="openPage('userInfo/toUserInfoPage.do')">用户管理</a></dd>
            <dd><a href="javascript:void(0)" onclick="openPage('roleInfo/toRoleInfoPage.do')">角色管理</a></dd>
            <dd><a href="javascript:void(0)" onclick="openPage('resourceInfo/toResourceInfoPage.do')">资源管理</a></dd>
          </dl>
        </li>
			<!--         <li class="layui-nav-item"><a href="">发布商品</a></li> -->
      </ul>
    </div>
  </div>
    
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
    	
    	<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
		  <ul class="layui-tab-title">
		    <li class="layui-this" lay-id="11">网站设置</li>
		    <li lay-id="22">用户管理</li>
		    <li lay-id="33">权限分配</li>
		    <li lay-id="44">商品管理</li>
		    <li lay-id="55">订单管理</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">内容1</div>
		    <div class="layui-tab-item">内容2</div>
		    <div class="layui-tab-item">内容3</div>
		    <div class="layui-tab-item">内容4</div>
		    <div class="layui-tab-item">内容5</div>
		  </div>
		</div>
		<div class="site-demo-button" style="margin-bottom: 0;">
		  <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
		  <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
		  <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
		</div>
    	
    	
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script src="ui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['element','jquery'], function(){
  var element = layui.element;
  var $=layui.jquery;
  
	//触发事件
	var active = {
	  tabAdd: function(){
	  	console.log("toAdd");
	    //新增一个Tab项
	    element.tabAdd('demo', {
	      title: '新选项'+ (Math.random()*1000|0) //用于演示
	      ,content: '内容'+ (Math.random()*1000|0)
	      ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	  }
	  ,tabDelete: function(othis){
	    //删除指定Tab项
	    element.tabDelete('demo', '44'); //删除：“商品管理”
	    
	    
	    othis.addClass('layui-btn-disabled');
	  }
	  ,tabChange: function(){
	    //切换到指定Tab项
	    element.tabChange('demo', '22'); //切换到：用户管理
	  }
	};  
	
	$('.site-demo-active').on('click', function(){
    	var othis = $(this), type = othis.data('type');
    	active[type] ? active[type].call(this, othis) : '';
  	});
  
  
    
	$.ajax({
		url:'<%=path %>/userInfo/createMenu.do',
		type: "POST",
	    dataType: "json",
		success:function(data){
			var tab_str=data.tabs;
			var it_str=data.menus;
			var tmp="";
			$.each(tab_str,function (i){
				//console.log(tab_str[i]);
				var n=tab_str[i];				
				tmp+="<li id='menu_li_"+n+"' class='layui-nav-item'><a href='javascript:;'>"+n+"</a></li>";				
			});			
			$("#menu_ul").append(tmp);
			tmp=null;
			
			var menu2=eval("["+it_str+"]"); 
			
			
			 
			//代码暂时写死，最多三级菜单
			
			$.each(menu2,function (i){
// 				console.log(menu2[i]);
				
// 				var tmp_id=menu2[i].id;				
				
// 				var tp_str="";
// 				var menu2_lists=menu2[i].menu;
// 				jq.each(menu2_lists,function (j){
					
// 					var menumenu2_lists[j].item;
				
// 					tp_str+=""+menu2_lists[j]+"";
// 				});
				
// 				console.log(menu2[i].id+"|"+tp_str)
			});
			
			
		}
	});
  
});

//递归
function getMenu(menu2){
	jq.each(menu2,function (i){			
		var tmp_id=menu2[i].id;				
		
		var tp_str="";
		var menu2_lists=menu2[i].menu;
		jq.each(menu2_lists,function (j){
			tp_str+=""+menu2_lists[j]+"";
		});
		
		console.log(menu2[i]);	
		console.log(menu2[i].id+"|"+tp_str)
	});
} 

//打开tab菜单

function openPage(url){
	console.log("打开"+url)
	//新增一个Tab项
    element.tabAdd('demo', {
      title: '新选项'+ (Math.random()*1000|0) //用于演示
      ,content: '内容'+ (Math.random()*1000|0)
      ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
    })
}
</script>
</body>
</html>